<html>
<head>
    <meta charset="utf-8">
    <title>显示页面</title>
</head>
<body>
    输入 id 查询 <input type='text' id='id' name='id'>
    <button onclick="id_test()">提交</button></br>

    输入名字查询 <input type='text' id='name' name='name'>
    <button onclick="name_test()">提交</button></br>

    查询历史记录 <button onclick="all_test()">提交</button></br>

    输入签到时长 <input type='text' id='time' name='time'>
    <button id="startButton">开始签到</button></br>

    统计 <button onclick="count()">提交</button></br>

    缺勤名单 <button onclick="countLack()">提交</button></br>


    <div id="result-container">

    </div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    function id_test() {
        var user_info = {
            id: document.getElementById("id").value
        }
        $.ajax({
            type: "post",
            url: "http://47.120.76.102:8080/display_by_id",
            data: JSON.stringify(user_info),
            dataType: "json",
            success: function (res, statu, xhr) {
                var finalHtml = "";
                if (res == null) {
                    finalHtml += '<div>' + "没有查询到任何结果" + '</div>';
                } else {
                        finalHtml += '<div>' + res.id + " " + res.name + " " + res.time + '</div>';
                }
                document.getElementById("result-container").innerHTML = finalHtml;

            },
            error: function (xhr) {
                alert(JSON.stringify(xhr));
            }
        });
    }
</script>
<script>
    function name_test() {
        var user_info = {
            name: document.getElementById("name").value
        }
        $.ajax({
            type: "post",
            url: "http://47.120.76.102:8080/display_by_name",
            data: JSON.stringify(user_info),
            dataType: "json",
            success: function (res, statu, xhr) {
                var finalHtml = "";
                if (res == null) {
                    finalHtml += '<div>' + "没有查询到任何结果" + '</div>';
                } else {
                    for (var data of res) {
                        finalHtml += '<div>' + data.id + " " + data.name + " " + data.time + '</div>';
                    }
                }
                document.getElementById("result-container").innerHTML = finalHtml;

            },
            error: function (xhr) {
                alert(JSON.stringify(xhr));
            }
        });
    }
</script>
<script>
    function all_test() {
        $.ajax({
            type: "get",
            url: "http://47.120.76.102:8080/display_all_note",
            dataType: "json",
            success: function (res, statu, xhr) {
                var finalHtml = "";
                if (res == null) {
                    finalHtml += '<div>' + "没有查询到任何结果" + '</div>';
                } else {
                    for (var data of res) {
                        finalHtml += '<div>' + data.id + " " + data.name + " " + data.time + '</div>';
                    }
                }
                document.getElementById("result-container").innerHTML = finalHtml;

            },
            error: function (xhr) {
                alert(JSON.stringify(xhr));
            }
        });
    }
</script>
<script>
    var isStartButtonClicked = false;
    var countdownInterval;
    document.getElementById("startButton").addEventListener("click", function () {
        if (!isStartButtonClicked) {
            isStartButtonClicked = true;
            // 禁用按钮并改变样式
            this.disabled = true;
            this.style.backgroundColor = 'gray';
            this.style.cursor = 'not-allowed';
            var durationInMinutes = parseInt(document.getElementById("time").value);
            if (!isNaN(durationInMinutes)) {
                var totalSeconds = durationInMinutes * 60;
                countdownInterval = setInterval(function () {
                    var minutes = Math.floor(totalSeconds / 60);
                    var seconds = totalSeconds % 60;
                    document.getElementById("result-container").innerHTML = "倒计时：" + minutes + "分" + seconds + "秒";
                    if (totalSeconds <= 0) {
                        clearInterval(countdownInterval);
                        document.getElementById("result-container").innerHTML = "签到完成";
                        // 启用按钮并恢复样式
                        document.getElementById("startButton").disabled = false;
                        document.getElementById("startButton").style.backgroundColor = '';
                        document.getElementById("startButton").style.cursor = 'pointer';
                        isStartButtonClicked = false;
                    }
                    totalSeconds--;
                }, 1000);
            }
            var time_info = {
                time: document.getElementById("time").value
            }
            $.ajax({
                type: "post",
                url: "http://47.120.76.102:8080/mqtt_start",
                dataType: "json",
                data: JSON.stringify(time_info),
            });
        }
    });
</script>
<script>
    function count() {
        $.ajax({
            type: "get",
            url: "http://47.120.76.102:8080/display_count",
            dataType: "json",
            success: function (res, statu, xhr) {
                var finalHtml = "";
                finalHtml += '<div>' + "应答人数："+ res.totalNums + '</div>';
                finalHtml += '<div>' + "实到人数："+ res.lackNums + '</div>';
                document.getElementById("result-container").innerHTML = finalHtml;

            },
            error: function (xhr) {
                alert(JSON.stringify(xhr));
            }
        });
    }
</script>
<script>
    function countLack() {
        $.ajax({
            type: "get",
            url: "http://47.120.76.102:8080/display_lack",
            dataType: "json",
            success: function (res, statu, xhr) {
                var finalHtml = "";
                if (res == null) {
                    finalHtml += '<div>' + "没有人缺勤" + '</div>';
                } else {
                    for (var data of res) {
                        finalHtml += '<div>' + data.id + " " + data.name + '</div>';
                    }
                }
                document.getElementById("result-container").innerHTML = finalHtml;

            },
            error: function (xhr) {
                alert(JSON.stringify(xhr));
            }
        });
    }
</script>
</html>